<template>
	<view class="container">
		<navigationbar :title="title" :bgColor="navigationbarColor" />
		<view v-if="isSwitch" class="progress">
			<u-line-progress :height="20" :percentage="percentCompleted" activeColor="#7aaffe"></u-line-progress>
			<text>{{ progressTips }}</text>
		</view>
		<view v-else>
			<view v-if="resumeData.length > 0">
				<view class="resumeList">
					<view class="content" @click="downloadFile">
						<text>{{ resumeData[0].fileName }}</text>
					</view>
				</view>
			</view>
			<view v-else><u-empty text="简历列表为空" icon="http://cdn.uviewui.com/uview/empty/list.png"></u-empty></view>
			<view class="uploadFile">
				<view class="btnContainer"><u-button class="btnUploadFile" size="normal" text="点击上传" :color="buttonBgColor" @click="uploadFile"></u-button></view>
			</view>
		</view>
		<u-toast ref="uToast"></u-toast>
	</view>
</template>

<script>
import navigationbar from '../navigationBar.vue';
export default {
	components: {
		navigationbar
	},
	data() {
		return {
			title: '我的简历',
			buttonBgColor: '#7aaffe',
			navigationbarColor: '#ffffff',
			percentCompleted: 0,
			isSwitch: false,
			progressTips: '文件上传中...',
			resumeData: []
		};
	},
	onShow() {
		uniCloud.callFunction({
			name: 'getResumeList',
			data: {
				id: this.$store.state.userID
			},
			success: res => {
				this.resumeData = res.result.data[0].resume_list;
			}
		});
	},
	methods: {
		uploadFile() {
			let that = this;
			wx.chooseMessageFile({
				count: 3,
				type: 'file',
				async success(res) {
					let { name, path, type } = res.tempFiles[0];
					const result = await uniCloud.uploadFile({
						filePath: path,
						cloudPath: name,
						fileType: type,
						onUploadProgress: progressEvent => {
							that.isSwitch = true;
							that.percentCompleted = Math.round((progressEvent.loaded * 100) / progressEvent.total);
						}
					});
					console.log(result);
					if (result.success === true) {
						let { fileID } = result;
						uniCloud
							.callFunction({
								name: 'setResumeList',
								data: {
									name,
									fileID,
									id: that.$store.state.userID
								}
							})
							.then(res => {
								console.log(res);
							});
						setTimeout(() => {
							that.isSwitch = false;
							that.$refs.uToast.show({
								message: '文件上传成功',
								icon: 'https://cdn.uviewui.com/uview/demo/toast/success.png',
								type: 'success'
							});
						}, 1000);
					} else {
						setTimeout(() => {
							that.isSwitch = false;
							that.$refs.uToast.show({
								message: '文件上传失败!',
								icon: 'https://cdn.uviewui.com/uview/demo/toast/success.png',
								type: 'success'
							});
						}, 1000);
					}
				}
			});
		},
		downloadFile() {
			uni.downloadFile({
				url: this.resumeData[0].fileID,
				success:(res) => {
					if (res.statusCode === 200) {
						uni.saveFile({
							tempFilePath: res.tempFilePath, //临时路径
							success:(res) => {
								this.$refs.uToast.show({
									message: '文件下载成功',
									icon: 'https://cdn.uviewui.com/uview/demo/toast/success.png',
									type: 'success'
								});
								setTimeout(() => {
									//打开文档查看
									uni.openDocument({
										filePath: res.savedFilePath,
										success: function(res) {
											console.log('打开文档成功');
										}
									});
								}, 3000);
							}
						});
					}
				}
			});
		}
	}
};
</script>

<style lang="scss">
.resumeList {
	width: 90%;
	height: 600rpx;
	margin: auto;
	.content {
		margin-top: 50rpx;
		width: 100%;
		height: 150rpx;
		padding: 10rpx;
		background-color: #f0f0f0;
	}
}

.uploadFile {
	height: 150rpx;
	width: 100%;
	position: absolute;
	bottom: 0;
	z-index: 9999;
	.btnContainer {
		width: 85%;
		height: 100%;
		margin: 0 auto;
	}
}
.progress {
	width: 90%;
	height: 40rpx;
	margin: 200rpx auto;
	text {
		width: 250rpx;
		display: block;
		margin: 20rpx auto;
	}
}
</style>
